<template>
    <div class="page-child-main see-doctor1">
        <a-spin :class="loading&&'null-spin'" tip="Loading..." :spinning="loading">
            <div></div>
        </a-spin>
        <div class="page-title">就诊人数统计</div>
        <div style="margin-top:20px">
            <div class="top-list">
                <img class="top-img" src="@/assets/img/today.png" />
                <div>
                    <div class="top-info">
                        <NumberAnimation :num="pageData.today" :decimal="0" />
                        人
                    </div>
                    <div class="top-title">今日就诊人数</div>
                </div>
            </div>
            <div class="top-list">
                <img class="top-img" src="@/assets/img/week.png" />
                <div>
                    <div class="top-info">
                        <NumberAnimation :num="pageData.week" :decimal="0" />人
                    </div>
                    <div class="top-title">本周就诊人数</div>
                </div>
            </div>
            <div class="top-list">
                <img class="top-img" src="@/assets/img/month.png" />
                <div>
                    <div class="top-info">
                        <NumberAnimation :num="pageData.month" :decimal="0" />人
                    </div>
                    <div class="top-title">当月就诊人数</div>
                </div>
            </div>
        </div>
        <div id="seeDoctorChart1"></div>

    </div>
</template>
<script lang="ts">
import api from "@/api/api";
import { echartLoad, toDecimalNoZero } from "@/utils";
import { Component, Vue } from "vue-property-decorator";
@Component({
    name: "tpl",
    components: {},
})
export default class extends Vue {
    loading = false;
    chart: any = null;
    maxData = 0;
    dataList: any[] = [];
    async mounted() {
        await this.getData();
        let max = 0;
        this.dataList.forEach((item) => {
            let val = item.val + item.smallVal;
            if (val > max) max = val;
        });
        this.maxData = Number(toDecimalNoZero(max + max * 0.1, 0));

        echartLoad(() => {
            this.setChart();
        });
    }

    pageData: any = {};
    async getData() {
        this.loading = true;
        try {
            const res = await api.getVisitStatisticsByTimeRange();
            this.pageData = res.data;
            const res1 = await api.getVisitTrend();
            this.dataList = res1.data.map((item) => {
                const date = item.date;
                const dateArr = date.split("-");
                return {
                    name: dateArr[1] + "-" + dateArr[2],
                    val: item.offlineCount,
                    smallVal: item.onlineCount,
                };
            });
        } finally {
            this.loading = false;
        }
    }

    setChart() {
        if (this.chart) {
            this.resetChart();
        } else {
            this.initChart();
        }
    }

    resetChart() {
        const options = this.chart.getOption();
        options.series = this.getSeries();
        this.chart.setOption(options, true);
    }
    initChart() {
        const chartDom = document.getElementById("seeDoctorChart1");
        // eslint-disable-next-line @typescript-eslint/no-this-alias
        const options: any = {
            grid: {
                top: 40,
                bottom: 50,
                left: 40,
                right: 50,
            },
            legend: {},

            tooltip: {
                trigger: "axis",
            },
            xAxis: [
                {
                    name: "日期",
                    type: "category",
                    data: this.dataList.map((item) => item.name),
                    axisLabel: {
                        color: "#6D6D6D",
                    },
                    axisPointer: {
                        type: "shadow",
                    },
                },
            ],
            yAxis: [
                {
                    show: true,
                    type: "value",
                    name: "就诊人数",
                    nameTextStyle: {
                        color: "#6D6D6D",
                    },
                    min: 0,
                    max: this.maxData,
                    interval: Number(toDecimalNoZero(this.maxData / 5, 0)),
                    axisLine: {
                        show: true, // 默认显示轴线，可省略
                        // lineStyle: {
                        //     color: "rgba(255,255,255,0.3)", // 轴线颜色
                        //     width: 1, // 轴线宽度
                        // },
                    },
                    axisLabel: {
                        formatter: "{value}",
                        color: "#6D6D6D",
                    },
                    splitLine: {
                        lineStyle: { color: "rgba(255,255,255,0.3)", type: "dashed" },
                    },
                },
            ],
            series: this.getSeries(),
        };
        if (chartDom) {
            this.chart = window.echarts.init(chartDom as HTMLDivElement);
            this.chart.setOption(options);
        }
    }

    getSeries() {
        return [
            {
                name: "线下门店",
                type: "bar",
                barWidth: "20",
                color: "#4469F1",
                stack: "Ad",
                data: this.dataList.map((item) => item.val),
            },
            {
                name: "小程序",
                type: "bar",
                barWidth: "20",
                color: "#F66944",
                stack: "Ad",
                itemStyle: {
                    barBorderRadius: [4, 4, 0, 0],
                },
                data: this.dataList.map((item) => item.smallVal),
            },
        ];
    }
}
</script>
<style lang="scss">
.see-doctor1 {
    height: 100%;
    display: flex;
    flex-direction: column;
    .top-list {
        display: inline-flex;
        align-items: center;
        background-color: #f6fbff;
        border-radius: 8px;
        padding: 20px;
        margin-right: 20px;
    }
    .top-img {
        width: 50px;
        height: 50px;
        margin-right: 20px;
    }
    .top-info {
        font-weight: bold;
        font-size: 22px;
        color: #222222;
    }
    .top-title {
        font-size: 14px;
        color: #6d6d6d;
        margin-top: 5px;
    }
    #seeDoctorChart1 {
        margin-top: 20px;
        flex-grow: 1;
        height: 50%;
        width: 100%;
    }
}
</style>
